<template>
    <div>
        <a-table :scroll="{ x: 1500}" :data-source="dataSource" :pagination="false" :columns="columns">
            <template #customFilterDropdown="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }">
                <div style="padding: 8px;">
                    <a-input-search
                            ref="searchInput"
                            :placeholder="`请输入${column.title}`"
                            style="width: 188px; margin-bottom: 8px; display: block"
                            @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
                            @search="handleSearch(selectedKeys, confirm, column.dataIndex)"
                    />
                </div>
            </template>
            <template #customFilterIcon="{ filtered }">
                <search-outlined :style="{ color: filtered ? '#108ee9' : undefined }"/>
            </template>
            <template #bodyCell="{ text, column,record }">
                <template v-if="column.dataIndex === 'notes'">
                    <a-popover v-if="text!=='' && text!==null" title="备注详情" trigger="click">
                        <template #content>
                            <p>{{text}}</p>
                        </template>
                        <unordered-list-outlined/>
                    </a-popover>
                    <div v-else>无</div>
                </template>
                <template v-if="column.dataIndex === 'orderStatus'">
                    <div v-if="text==='FIN'">
                        <span><a-badge status="success"/>已完成</span>
                    </div>
                    <div v-if="text==='UNFIN'">
                        <span><a-badge status="default"/>未完成</span>
                    </div>
                    <div v-if="text==='REFUNDED'">
                        <span><a-badge status="processing"/>已退款</span>
                    </div>
                    <div v-if="text==='REFUNDING'">
                        <span><a-badge status="error"/>待退款</span>
                    </div>
                </template>

                <template v-if="column.dataIndex ==='waimai'">
                    <div v-if="text===0">
                        <span>外卖</span>
                    </div>
                    <div v-else>
                        <span>堂食</span>
                    </div>
                </template>
                <template v-if="column.dataIndex ==='isGoOut'">
                    <div v-if="text===0">
                        <a-popconfirm
                                title="请确定餐已备好？"
                                ok-text="确定"
                                cancel-text="取消"
                                @confirm="confirmIsGoOut(record.id)"
                        >
                            <a href="#">未出餐</a>
                        </a-popconfirm>
                    </div>
                    <div v-else>
                        <span>已出餐</span>
                    </div>
                </template>
                <span v-if="state.searchText && state.searchedColumn === column.dataIndex">
        <template
                v-for="(fragment, i) in text.toString().split(new RegExp(`(?<=${state.searchText})|(?=${state.searchText})`, 'i'))">
          <mark v-if="fragment.toLowerCase() === state.searchText.toLowerCase()" :key="i" class="highlight">
            {{ fragment }}
          </mark>
          <template v-else>{{ fragment }}</template>
        </template>
      </span>
            </template>
        </a-table>
        <div class="pagination">
            <a-pagination @change="onShowSizeChange" size="small" :total="totalCount" show-size-changer
                          show-quick-jumper/>
            &nbsp;&nbsp;&nbsp;
            <div>共&nbsp;{{totalCount}}&nbsp;条</div>
        </div>
    </div>
</template>

<script>
    import {request} from "@/utils/request";
    import api from "@/constants/api";
    import {message} from 'ant-design-vue';

    export default {
        name: "OrdersPage",
        data() {
            return {
                columns: [
                    {
                        title: "订单",
                        dataIndex: "id",
                        key: "id",
                        customFilterDropdown: true,
                        //onFilter: (value, record) => record.name.toString().toLowerCase().includes(value.toLowerCase()),
                    },
                    {
                        title: "会员ID",
                        dataIndex: "customerId",
                        key: "customerId",
                    },
                    {
                        title: "订单名称",
                        dataIndex: "title",
                        key: "title",
                    },
                    {
                        title: "顾客名称",
                        dataIndex: "customerName",
                        key: "customerName",
                    },
                    {
                        title: '顾客手机号',
                        dataIndex: 'phone',
                        key: "phone",
                    },
                    {
                        title: '支付金额',
                        dataIndex: 'payment',
                        key: 'payment',
                    },
                    {
                        title: '订单状态',
                        dataIndex: 'orderStatus',
                        key: 'orderStatus',
                    },
                    {
                        title: '堂食/外卖',
                        dataIndex: 'waimai',
                        key: 'waimai',
                    },
                    {
                        title: '是否出餐',
                        dataIndex: 'isGoOut',
                        key: 'isGoOut',
                    },
                    {
                        title: '顾客收货地址',
                        dataIndex: 'customerAddress',
                        key: 'customerAddress',
                    },
                    {
                        title: '订单创建时间',
                        dataIndex: 'createdTime',
                        key: 'createdTime',
                    },
                    {
                        title: '订单更新时间',
                        dataIndex: 'updateTime',
                        key: 'updateTime',
                    },
                    {
                        title: '订单备注',
                        dataIndex: 'notes',
                        key: 'notes',
                    },
                ],
                pagination: {
                    size: "small",
                    showSizeChanger: true,
                    showQuickJumper: true,
                },
                totalCount: 0,
                dataSource: [],
                state: {
                    searchText: '',
                    searchedColumn: '',
                },
                currentPage: 0,
                pageSize: 10,
                modalVisible: false,
                imagePath: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
            }
        },
        mounted() {
            this.getAllOrdersList(0, 10);
        },
        methods: {
            handleSearch(selectedKeys, confirm, dataIndex) {
                confirm();
                this.state.searchText = selectedKeys[0];
                this.state.searchedColumn = dataIndex;
            },

            onShowSizeChange(current, pageSize) {
                if (current - 1 === 0) {
                    this.getAllOrdersList(0, pageSize);
                    this.currentPage = 0
                    this.pageSize = pageSize;
                } else {
                    this.currentPage = (current - 1) * pageSize;
                    this.pageSize = pageSize;
                    this.getAllOrdersList((current - 1) * pageSize, pageSize);
                }
            },

            getAllOrdersList(pageNum, pageSize) {
                let that = this;
                request({
                    url: api.GET_ALL_ORDER,
                    method: 'GET',
                    params: {
                        pageNum: pageNum,
                        pageSize: pageSize
                    }
                }).then(res => {
                    that.dataSource = res;
                });
                request({
                    url: api.GET_ALL_ORDER_COUNT,
                }).then(res => {
                    that.totalCount = res;
                })
            },

            showModal() {
                this.modalVisible = true;
            },

            hideModal() {
                this.modalVisible = false;
            },

            confirmIsGoOut(id) {
                request({
                    url: api.ORDER_GET_OUT,
                    method: 'GET',
                    params: {id: id},
                    pureData: false,
                }).then(res => {
                    if (res.code === 200) {
                        message.success("操作成功");
                    }
                    this.getAllOrdersList(this.currentPage, this.pageSize);
                })
            }

        }
    }
</script>

<style scoped>
    .pagination {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-left: 60%;
        margin-top: 20px;
    }
</style>